<template>
  <view class="upload-pic">
    <view class="flex-row fww pic-list">
      <view class="upload-item u-rela" v-for="(val, idx) in lists" :key="idx">
        <image
          @click.stop="previewImage(val, lists)"
          class="upload-item-pic"
          :src="val"
          mode=""
        ></image>
        <u-icon
          class="upload-item-icon"
          v-if="!is_preview"
          name="close-circle-fill"
          color="#d21f1f"
          @click="removeImage(val, idx)"
        ></u-icon>
      </view>
      <image
        v-if="lists.length < count && !is_preview"
        @click="uploadImage()"
        class="upload-item-pic"
        :src="icon_path + icon_name"
        mode=""
      ></image>
    </view>
  </view>
</template>

<script>
  /**
   * 上传图片
	 *  <upload-pic
        @confirm="
          (val) => {
            refund_imgs = val
          }
        "
      />
   */
  import ali from '@/mixin/ali'
  export default {
    mixins: [ali],
    props: {
      count: {
        type: Number,
        default: 3,
      },
      preview_list: {
        type: Array,
        default: () => [],
      },
      is_preview: {
        type: Boolean,
        default: false,
      },
      // 图标名称
      icon_name: {
        type: String,
        default: 'icon-up-picture@2x.png',
      },
    },
    data() {
      return {
        lists: [],
      }
    },
    watch: {
      lists: {
        handler(val) {
          this.$emit('confirm', val)
        },
        immediate: true,
      },
      preview_list: {
        handler(val) {
          if (val.length) {
            this.lists = val
          }
        },
        immediate: true,
      },
    },
    methods: {
      // 上传图片
      uploadImage() {
        let _this = this
        uni.chooseImage({
          count: _this.count - _this.lists.length,
          success: (v) => {
            const { tempFiles, tempFilePaths } = v
            tempFiles.map((temp, index) => {
              console.log(tempFilePaths[index])
              _this.fileUpload('image', tempFilePaths[index], temp.name, (res) => {
                _this.lists.push(res)
              })
            })
          },
        })
      },
      /**
       * 删除图片
       * @param {Object} index
       */
      removeImage(index) {
        this.lists.splice(index, 1)
        this.$u.toast('删除成功')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .upload-pic {
    .slot-btn {
      display: flex;
      width: 160rpx;
      height: 160rpx;
      background: rgb(244, 245, 246);
      border-radius: 10rpx;
      justify-content: center;
      align-items: center;
    }

    .slot-btn__hover {
      width: 160rpx;
      height: 160rpx;
      background-color: rgb(235, 236, 238);
    }

    .upload-item {
      width: 160rpx;
      height: 160rpx;
      margin-right: 24rpx;

      &-pic {
        width: 160rpx;
        height: 160rpx;
      }

      &-icon {
        position: absolute;
        top: -10rpx;
        right: -10rpx;
      }
    }
  }
</style>
